<template>
    <div class="cont">
        <van-popup v-model="show" close-on-popstate @close="close">
            <div class="popup-cont text-center">
                <div class="pay-img">
                    <img v-if="type == 1" src="https://h5.dhcc.wang/newprogram/wxRobot/open_succeed.png" alt="">
                    <img v-else src="https://h5.dhcc.wang/newprogram/wxRobot/open_fail.png" alt="">
                </div>
                <div class="m-t-10 font-16">
                    <span v-if="type == 1">支付成功</span>
                    <span v-else>支付失败</span>
                </div>
                <div class="m-t-10 color-9">
                    <span class="font-14" v-if="type == 1">恭喜您，开通成功！</span>
                    <span class="font-14" v-else>很遗憾，请您重新购买开通~</span>
                </div>
                <div class="m-t-20 btn-group flex align-center justify-center">
                    <span @click="close" class="btn-group-item">取消</span>
                    <span @click="confrim" class="btn-group-item m-l-15 color-white">确定</span>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Popup } from 'vant'
export default {
    components: {
        [Popup.name]: Popup
    },
    props: {
        popupVisible: {
            type: Boolean,
            default: false
        },
        type: {
            type: Number,
            default: 0
        }
    },
    data () {
        return {
            show: this.popupVisible
        }
    },
    created () {},
    mounted () {},
    methods: {
        close () {
            this.$emit('confrim')
        },
        confrim () {
            this.$emit('confrim')
        }
    }
}
</script>
<style lang="less" scoped>
.cont{
    /deep/ .van-popup{
        border-radius: 14px;
    }
}
.popup-cont{
    padding: 30px 18px;
    width: 65vw;
    .pay-img{
        margin: 0 auto;
        width: 100px;
        height: 90px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .btn-group{
        &-item{
            flex: 1;
            padding: 8px 0;
            font-size: 15px;
            background: #eee;
            border-radius: 6px;
            &:nth-of-type(2){
                color: #7E3D0D;
                background: linear-gradient(144deg, #F8E8C1 0%, #F2D093 100%);
            }
        }
    }
}
</style>